<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" checked="false" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    var data = [
      {
        id: 0,
        title: "残酷月光 - 费启鸣",
        checked: true,
        collect: true
      }, {
        id: 1,
        title: "兄弟 - 艾热",
        checked: true,
        collect: false
      }, {
        id: 2,
        title: "毕生 - 夏增祥",
        checked: false,
        collect: true
      }, {
        id: 3,
        title: "公子向北去 - 李春花",
        checked: false,
        collect: false
      }, {
        id: 4,
        title: "战场 - 沙漠五子",
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];

    // 判断是否需要全选
    // function isCheckAll(data){
    //  var res =  data.every(item=>item.checked);
    //  return res;
    // }
    // 简化版
    let isCheckAll = data => data.every(item => item.checked);

    function renderDom (data) {
      let listEle = document.querySelector("#list");
      // 渲染数据
      listEle.innerHTML = "";
      data.forEach((item, key) => {
        let liEle = document.createElement("li");
        liEle.innerHTML = `
          <input type="checkbox" ${item.checked ? 'checked' : ''} />
          <span>${item.title}</span>
          ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'}
          <a href="javascript:;" class="remove">删除</a>`;

        /* // 直接绑定事件
        // 生成li的时候立刻获取 收藏 或者取消收藏按钮  需判断一下 是否是收藏和取消收藏 按钮
        let collectEle = liEle.querySelector(".collect");
        collectEle && (collectEle.onclick = function () {
          // 修改数据  点击收藏 要收藏歌曲
          data[key].collect = true;
          // 根据数据渲染视图
          renderDom(data);
        })

        let cancelCollectEle = liEle.querySelector(".cancelCollect");
        cancelCollectEle && (cancelCollectEle.onclick = function () {
          data[key].collect = false;
          renderDom(data);
        }) */


        // 事件委托，把事件委托给父元素 li 
        // 原生js 操作类名 classList.add 添加类名 如果已有 则取消添加
        // classList.contains 确定元素是否有该类名 返回值是true和false
        // classList.remove 移除类名
        // classList.toggle 切换类名
        // classList.replace 替换类名
        liEle.onclick = function (e) {
          // 点击收藏 
          if (e.target.classList.contains("collect")) {
            data[key].collect = true;
            data[key].checked = true
            renderDom(data);
          }
          // 点击取消收藏
          if (e.target.classList.contains("cancelCollect")) {
            data[key].collect = false;
            data[key].checked = false
            renderDom(data);
          }
          // 删除li
          if (e.target.classList.contains("remove")) {
            data.splice(key, 1);
            renderDom(data);
          }
          if (e.target.nodeName === 'INPUT') {
            data[key].checked = e.target.checked
            let liNode = e.target.nextSibling.nextSibling.nextSibling.nextSibling;
            
            // liNode.classList.toggle('collect')
            // console.log(liNode);
            data[key].checked? liNode.innerHTML = '取消收藏':liNode.innerHTML = '收藏';
            
            // 小框影响 全选和全不选的状态
             document.querySelector("#checkAll").checked = data.length && isCheckAll(data);
          }
        }
        listEle.appendChild(liEle);
      })
    }
    renderDom(data);

    // 动态添加数据
    let addA = document.querySelector('.footer #add')
    let inptxt = document.querySelector('.footer #newInfo')
    addA.addEventListener('click', () => {
      data.push({ id: data.length, title: `${inptxt.value}`, checked: false, collect: false })
      renderDom(data)
      inptxt.value = ''
    })

    // 全选全不选 影响小框
    let checkAll = document.querySelector('.footer #checkAll')
    checkAll.onclick = function () {
      data.forEach(item => {
        item.checked = this.checked // 箭头函数 没有this  找上层作用域 是checkAll 触发事件
      })
      renderDom(data)
    }

    // 点击删除所有 已收藏
    document.querySelector('#remove').onclick = function(){
      data = data.filter( item => item.checked === false)
      renderDom(data)
    }


  </script>
</body>

</html>